<template>
  <div class="index">
    <header class="header">
      <div class="left" @click='home'><img src="../../static/img/arrow.png"></div>
      <div class="center">{{msg}}</div>
      <div class="right"></div>
    </header>

    <div class="img-first" >
      <img src="../../static/img/soup-1.png"/>
      <p>{{cont}}</p>
    </div>

    <ul class="img-list">
      <li v-for="imgtex in imgtexs">
         <figure>
           <img :src="imgtex.soup">
         </figure>
         <article>
            <p>{{imgtex.titled}}</p>
            <span>{{imgtex.depictd}}</span>
         </article>
      </li>
      
    </ul>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'soup',
    data () {
      return {
        msg: '精力汤',
        cont: '营养破壁  助你精力充沛',
        imgtexs: []
      }
    },
    mounted () {
      axios.get('/static/js/soup.json')
      .then(response => {
        this.imgtexs = response.data
        console.log(this.imgtexs)
      })
    },
    methods: {
      home: function () {
        this.$router.go(-1)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import  '../assets/css/reset.css';

 body{
  height: 100%;
 }
  .px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}


  .index{
     .header {
      position: fixed;
      width: 100%;
      top: 0;
       .px2rem (height,150);       
        background:#1a1a1a;
        display: flex;
        justify-content: center;
        align-items: center;
        .left{
          width: 4em;
          .px2rem (padding-left,30);
          img{
            width: 33%;
          }
        }
        .center{
            flex:1;
            .px2rem (font-size,60);            
            color: #be8f59;
            text-align: center;

        }
        .right{
          width: 4em;
        }
    }

    .img-first{
      display: flex;
      flex-direction: column;
      .px2rem (margin-top,150);
      img{
        width: 100%;
      }
      p{
        .px2rem (height,92);
        background: #f2f2f2;
        .px2rem (font-size,40);
        .px2rem (line-height,90);
        .px2rem (padding-left,30);
        color: #323232;
      }
    }

    .img-list{
      .px2rem (margin-bottom,30);
        >li:first-child{
          .px2rem (padding-top,0);
        }
        >li{
          display: flex;
          flex-direction: column;
           border-bottom: 3px solid #be8f59;
           .px2rem (margin-left,15);
           .px2rem (margin-right,15);
           .px2rem (padding-top,15);
          >figure{
            background: #f2f2f2;
            >img{
              width: 100%;
            }
          }
          >article{
            color: #be8f59;
            .px2rem (font-size,40);
            .px2rem (padding-bottom,20);
            background: #f2f2f2;
            >p{
              .px2rem (line-height,70);
              .px2rem (padding-left,30);
            }
            >span{              
              .px2rem (font-size,34);
              .px2rem (padding-left,30);
              .px2rem (padding-right,30);
              .px2rem (line-height,50);             
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              word-break: break-all;
            }
          }

        }
    }
  }
</style>
